import React, { CSSProperties, ChangeEventHandler, FocusEventHandler, MutableRefObject, ReactNode, useCallback, useMemo } from 'react';
import styled, { useTheme } from 'styled-components';
import { Input as InputAnti, InputRef } from 'antd'
import Icon from './Icon';
import IconHideen from '../asserts/hidden.svg'
import IconShow from '../asserts/show.svg'

type InputType = 'text' | 'password' | 'number';
type InputSize = 'huge' | 'large' | 'middle' | 'small';

const HUGE_BORDER_RADUIS = '1.5625rem'
const HUGE_HEIGHT = '3.125rem'
const HUGE_FONT_SIZE = '1rem'

const Container = styled.div<{ size: InputSize, raduis?: string }>`
    width: 100%;
    display: flex;
    .ant-input {
        width: 100%;
    }
    /* background-color: ${(prop) => prop.theme.background.input}; */
    .ant-input-password {
        border-color: ${(prop) => prop.theme.background.input} !important;
        padding: ${({ size }) => size === 'huge' ? '0 1rem 0 0' : undefined};
        background-color: ${(prop) => prop.theme.background.input};
        box-shadow: none;
        border-radius: ${({ size, raduis }) => size === 'huge' ? raduis || HUGE_BORDER_RADUIS : undefined};
    };
    .ant-input-affix-wrapper-lg {
        display: flex;
        align-items: center;
        width: 100%;
        border-color: ${(prop) => prop.theme.background.input} !important;
        padding: ${({ size }) => size === 'huge' ? '0 1rem 0 0' : undefined};
        background-color: ${(prop) => prop.theme.background.input};
        box-shadow: none;
        border-radius: ${({ size, raduis }) => size === 'huge' ? raduis || HUGE_BORDER_RADUIS : undefined};
    }
        
`

interface Props {
    type?: InputType
    style?: CSSProperties;
    size?: InputSize;
    raduis?: string;
    fontSize?: string;
    backgroundColor?: string;
    placeholder?: string;
    maxLength?: number;
    onChange?: ChangeEventHandler<HTMLInputElement>;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    prefix?: ReactNode;
    suffix?: ReactNode;
    inputRef?: MutableRefObject<InputRef | null>;
    value?: string | number;
    inputClassName?: string;
}

const Input: React.FC<Props> = ({ type = 'text', size = 'huge', onBlur, value, inputRef, backgroundColor, raduis, style, fontSize, placeholder, inputClassName, ...others }) => {
    const theme = useTheme()
    const inputStyle = useMemo(() => {
        const defaultStyle = {
            border: 'none',
            boxShadow: 'none',
            color: theme.text.input,
            backgroundColor: backgroundColor || theme.background.input
        }

        if (size === 'huge') {
            return {
                padding: '0 1rem',
                ...defaultStyle,
                ...style,
                height: HUGE_HEIGHT,
                fontSize: fontSize || HUGE_FONT_SIZE,
                borderRadius: raduis || HUGE_BORDER_RADUIS,
            }
        }

        return {
            ...defaultStyle,
            ...style,
            fontSize,
            borderRadius: raduis,
        }

    }, [theme.text.input, theme.background.input, size, style, backgroundColor, fontSize, raduis])

    const Component = useMemo(() => {
        return type === 'password' ? InputAnti.Password : InputAnti
    }, [type])

    const passwordStyle = useCallback(() => {
        return type === 'password' ? {
            iconRender: (v: boolean) => <Icon src={v ? IconShow : IconHideen} />
        } : {}
    }, [type])

    return <Container size={size}>
        <Component
            ref={inputRef}
            {...others}
            {...passwordStyle()}
            onBlur={onBlur}
            value={value}
            type={type}
            placeholder={placeholder}
            size={size === 'huge' ? 'large' : size}
            styles={{
                input: inputStyle
            }}
            classNames={{
                input: inputClassName
            }}
        />
    </Container>
}

export default Input